<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" :autoBack="true" title="活动" placeholder>
			<template slot="right">
				<text @click="hanldeActivityRecord" class="font-24 color-theme">活动记录</text>
			</template>
		</u-navbar>

		<view class="pad-32">
			<view class="banner">
				<image class="cover radius24" :src="data.cover" mode=""></image>
				<view class="centerXY rule_btn" @click="hanldeRule">
					<text>活动规则</text>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
			</view>
		</view>

		<view class="pad-left-right-32 pad-bottom-200">
			<view class="bg-theme1 pad-24 radius24">
				<view class="font-32 color-white font-w-500 my-font">玩法名称</view>
				<view class="mar-top-30 color-grey font-28">{{data.title}}</view>
			</view>

			<view class="bg-theme1 pad-24 radius24 mar-top-30">
				<view class="font-32 color-white font-w-500 my-font">请选择合成方式</view>

				<view class="mar-top-30 list-box centerY gap30 rowW">
					<view @click="hanldeTab(index)" class="tab-list" :class="tabInx == index ? 'tabOn' : ''"
						v-for="(item,index) in material" :key="index">
						<view>{{item.name}}</view>
					</view>
				</view>

				<!-- 材料列表 -->
				<view class="mar-top-30 list-box">
					<view @click="hanldeMaterial(item,index)" v-for="(item,index) in goodsList" :key="index">
						<view class="list pad-20 centerY mar-bottom-30">
							<view class="list-right centerXY radius12">
								<u-icon v-if="item.isShow" color="#F70FFF" size="30"
									name="checkmark-circle-fill"></u-icon>
							</view>
							<view class="centerY betweenX flex-w">
								<view class="mar-left-20 color-grey font-28">请添加合成原料</view>
								<view class="centerXY color-grey">
									<u-icon size="26" name="plus-circle"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 选择材料 -->
		<u-popup  bgColor="#36313B" mode="bottom" round="12" :show="isMaterial" closeable @close="handelClose">
			<view class="pad-32 mar-top-50">
				<view class="centerY betweenX color-white">
					<view class="font-32 font-w-500">需要<text class="hold-number">{{singleMaterial.num}}</text>个材料</view>
					<!-- <view class="color-grey font-28">已选（<text class="hold-number">{{singleMaterial.number}}</text>）
					</view> -->
				</view>
				<u-collapse accordion :border="false">
					<u-collapse-item v-for="(item,index) in singleMaterial.itemArray">
						<view slot="title">
							<view class="font-30 color-white font-w-600">{{item.name}}</view>
							<view class="font-26 color-white mar-top-20" v-if="item.num>0">
								<text>至少需要</text>
								<text class="hold-number">{{item.num}}</text>个
							</view>
							<view class="font-26 mar-top-20" v-else>组合{{singleMaterial.num}}</view>
						</view>
						<view slot="value" class="font-28 color-white">选择</view>
						<view class="u-collapse-content">
							<view class="goods-list rowW gap30">
								<view v-for="(info,goodsIndex) in item.goods" class="list centerXY radius16 bg-theme1"
									@click="hanldeSelectGoods(index,goodsIndex,info.id,info)">
									<view class="font-28 color-white">{{info.goods_info.name}}</view>
									<view class="color-grey font-24">#{{info.code}}</view>
									<template v-if=" JSON.stringify(choseGoodsIdArr) != '{}'">
										<image v-if="choseGoodsIdArr[tabInx].goods[slutId].indexOf(info.id) >-1"
											class="checked-icon" src="../../static/icon/checked-icon.png"></image>
									</template>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
			<view class="pad-left-right-30 pad-top-bottom-6">
				<view @click="hanldeConfirmSelection" class="button-style flex-w font-32">确认选择</view>
			</view>
		</u-popup>

		<!-- 确定干 -->
		<view class="button-box pad-left-right-32 pad-top-bottom-6 bg-theme1 centerY">
			<view v-if="join_now" @click="hanldeOpenActvity" class="button flex-w font-32">立即合成</view>
			<view v-else class="button buttonOp flex-w">{{msg}}</view>
		</view>

		<!-- 合成提示 -->
		<u-popup mode="center" bgColor="transparent" round="12" :show="isConsume">
			<view class="text-right mar-bottom-20">
				<image @click="isConsume = false" class="close" src="../../static/icon/close.png"></image>
			</view>

			<view class="gifts-box">
				<view class="text-center centerXY">
					<image class="title-img" src="../../static/image/19.png"></image>
					<text>提示</text>
					<image class="title-img" src="../../static/image/20.png"></image>
				</view>
				<view class="mar-top-40 text-center font-28 color-grey">此轮抽奖需要消耗藏品明细如下，请确认~</view>
				<view class="consume-list">
					<view class="list mar-bottom-20 centerY" v-for="item in consume">
						<view class="mar-left-15 font-28  flex-w betweenX">
							<view class="flex-w multi1">{{item.goods_info.name}}</view>
							<view class="mar-left-20">#{{item.code}}</view>
						</view>
					</view>
				</view>
				<view class="centerXY">
					<view class="consume-cancel" @click="isConsume = false">取消</view>
					<view @click="hanldeCompound" class="consume-define mar-left-32">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 结果弹窗 -->
		<u-popup mode="center" bgColor="transparent" round="12" :show="isGifts">
			<view class="text-right mar-bottom-20">
				<image @click="isGifts = false" class="close" src="../../static/icon/close.png"></image>
			</view>

			<view class="gifts-box">
				<view class="text-center centerXY">
					<image class="title-img" src="../../static/image/19.png"></image>
					<text class="font-30" v-if="isLucky">惊喜连连，再试一次</text>
					<text class="font-30" v-else>就差一点，再试一次</text>
					<image class="title-img" src="../../static/image/20.png"></image>
				</view>
				<view class="gifts-list">
					<view v-if="isLucky" class="list mar-bottom-20 centerY" v-for="item in gifts.goods">
						<image class="gifts-image" :src="item.goods_info.cover" mode=""></image>
						<view class="mar-left-15 font-28 color-theme">{{item.goods_info.name}}</view>
					</view>
					<view v-if="!isLucky" class="centerXY columnY mar-top-120">
						<image class="cry" src="../../static/image/cry.png"></image>
						<view class="mar-top-30 font-28 color-grey">很遗憾，您未中奖</view>
					</view>
				</view>
				<view class="centerX">
					<view @click="isGifts = false" class="gifts-button">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		activityChannelInfo,
		myGoodsCodeList,
		activityCovert
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 详情
				data: {},
				// 选择才来数组
				material: [],
				// 默认材料1
				tabInx: 0,
				// 方式得材料
				materialInfo: {},
				// 材料需要的藏品
				goodsList: [],
				// 材料弹窗
				isMaterial: false,
				// 持有的材料
				holdList: [],
				// 单个材料合集
				singleMaterial: {},
				// 选中的id
				selectId: [],
				// 要提交的数据
				postData: {
					material_id: '',
					material: {
						goods: []
					}
				},
				// 弹框选中数量
				selectAllNumber: 0,
				choseGoodsIdArr: {},
				slutId: 0,
				// 自己回显的数据
				initArray: [],
				// 提示 消耗数组
				consume: [],
				// 消耗数组弹窗
				isConsume: false,
				// 中奖奖品数据
				gifts: {},
				// 是否中奖
				isLucky: false,
				// 中奖弹窗
				isGifts: false,
				join_now: false,
				msg: '立即合成'
			}
		},
		onLoad(options) {
			this.activityId = options.id;
			this.getDataInfo();
		},
		methods: {
			// 初始化数据
			handelClose() {
				this.getInitData();
				this.goodsList.forEach(item => {
					item.isShow = false;
				})
				this.isMaterial = false;
				this.consume = [];
			},
			// 合成二次确认
			hanldeOpenActvity() {

				let num = 0;
				for (let i = 0; i < this.goodsList.length; i++) {
					if (this.goodsList[i].isShow) {
						num = i;
					} else {
						uni.$u.toast(`所需材料不足`)
						return
					}
				}

				// 全部材料选完
				if (num == this.goodsList.length - 1) {
					this.isConsume = true;

				} else {
					uni.$u.toast(`所需材料不足`)
				}
			},
			// 立即合成
			hanldeCompound() {

				let num = 0;
				for (let i = 0; i < this.goodsList.length; i++) {
					if (this.goodsList[i].isShow) {
						num = i;
					} else {
						uni.$u.toast(`所需材料不足`)
						break
					}
				}

				// 全部材料选完
				if (num == this.goodsList.length - 1) {

					this.isConsume = false;
					activityCovert({
						material_id: this.materialInfo.id,
						material: this.choseGoodsIdArr[this.tabInx]
					}).then(res => {
						let {
							gifts,
							is_lucky
						} = res.data;
						this.gifts = gifts;
						this.isLucky = is_lucky
						this.isGifts = true;
						this.consume = []
						this.choseGoodsIdArr = {};
						this.material = {};
						this.initArray = [];
						this.goodsList = [];
						this.tabInx = 0;
						this.getDataInfo();
					})
				} else {
					uni.$u.toast(`所需材料不足`)
				}
			},
			// 确认选择
			hanldeConfirmSelection() {
				let thatGoodsIdarr = this.choseGoodsIdArr[this.tabInx].goods[this.slutId];
				let item = this.singleMaterial.itemArray;
				for (let i = 0; i < item.length; i++) {
					if (this.initArray[this.slutId].goods[i].length >= item[i].num) {
						if ((item.length - 1) == i) {
							if (thatGoodsIdarr.length < this.singleMaterial.num) {
								uni.$u.toast(`所需材料不足`)
								return
							}
						}
					} else {
						uni.$u.toast(`至少选择${item[i].num}${item[i].name}`)
						return
					}
				}

				this.goodsList[this.slutId].isShow = true;

				// 添加成功关闭弹窗
				this.isMaterial = false;
			},
			// 点击选中
			hanldeSelectGoods(index, goodsIndex, codeId, item) {

				let thatGoodsIdarr = this.choseGoodsIdArr[this.tabInx].goods[this.slutId];
				let choseIdx = thatGoodsIdarr.indexOf(codeId)
				let inx = this.initArray[this.slutId].goods[index].findIndex(i => i == codeId)

				if (choseIdx > -1) {
					thatGoodsIdarr.splice(choseIdx, 1)
					this.initArray[this.slutId].goods[index].splice(inx, 1);
					// 删除被消耗的提示
					this.consume.splice(choseIdx, 1);
				} else {
					if (thatGoodsIdarr.length >= this.singleMaterial.num) {
						uni.$u.toast(`所需材料不能超过${this.singleMaterial.num}`)
						return
					}
					this.initArray[this.slutId].goods[index].push(codeId)
					// 增加被消耗的提示
					this.consume.push(item);
					thatGoodsIdarr.push(codeId);
				}

				this.choseGoodsIdArr[this.tabInx].goods[this.slutId] = thatGoodsIdarr;

				// 更新试图
				this.$forceUpdate()
			},
			// 计算选中数量
			getNumber() {
				let data = this.singleMaterial.itemArray;

				// 统计数量
				let numberArray = [];
				data.forEach(item => {
					item.goods.forEach(info => {
						if (info.isShow) {
							numberArray.push(info.id);
						}
					})
				})

				this.singleMaterial.ids = numberArray;
				this.singleMaterial.number = numberArray.length;

				// 更新试图
				this.$forceUpdate()
			},
			// 查询材料
			getMaterial(arrayId, slutId) {
				// 获取材料
				myGoodsCodeList({
					goods_ids: arrayId,
					lock_scene: 'normal'
				}).then(res => {
					this.singleMaterial.itemArray.forEach(item => {
						item.goods = [];
						res.data.lists.forEach((info, index) => {
							if (item.id == info.goods_id) {
								item.goods.push(info)
							}
						});
					})

					// 更新试图
					this.$forceUpdate()
				})
			},
			// 选择当合集
			hanldeMaterial(item, slutIdx) {
				this.isMaterial = true;
				this.slutId = slutIdx;
				// 格式化数据
				let arrayId = []
				let goodsArray = [];
				for (let key in item.goods_ids) {
					arrayId.push(key);
					goodsArray.push({
						id: key,
						name: item.multi_goods_info[key].name,
						num: item.goods_ids[key],
					});
				}
				// 提出选中的材料
				item.itemArray = goodsArray;
				this.singleMaterial = item;
				this.getMaterial(arrayId, slutIdx);
			},
			// 切换材料
			hanldeTab(index) {
				this.tabInx = index;
				this.slutId = 0
				this.consume = [];
				this.materialInfo = this.material[index];
				
				if (this.material[index].material_config.goods) {
					this.goodsList = this.material[index].material_config.goods;
				} else {
					this.goodsList = []
				}
				this.getInitData();
				this.goodsList.forEach(item => {
					item.isShow = false;
				})
			},
			// 获取玩法详情
			getDataInfo() {
				activityChannelInfo({
					id: this.activityId
				}).then(res => {
					let {
						info,
						material,
						join_now,
						msg
					} = res.data

					this.msg = msg;
					this.join_now = join_now;
					this.data = info;

					//有合法方式
					if (material != undefined && material != 'undefined') {
						this.material = material;
						// 默认方式1
						this.materialInfo = material[0];
						material[0].material_config.number = 0;
						this.goodsList = material[0].material_config.goods;
						this.getInitData();
					}
				})
			},
			// 初始化数据
			getInitData() {
				// 给后台的数据
				let initMar = {}
				for (let i in this.material) {
					let gArr = []
					for (let gg in this.material[i].material_config.goods) {
						gArr.push([])
					}

					initMar[i] = {
						goods: gArr
					};
				}

				this.choseGoodsIdArr = initMar;

				//  本地拆分数据
				let initArray = [];
				for (let i = 0; i < this.materialInfo.material_config.goods.length; i++) {
					let itemGoods = {}
					for (let gg in this.materialInfo.material_config.goods[i]) {
						itemGoods.goods = []
						for (let gg in this.materialInfo.material_config.goods[i].goods_ids) {
							itemGoods.goods.push([])
						}
					}
					initArray.push(itemGoods)
				}

				this.initArray = initArray;

			},
			// 活动规则
			hanldeRule() {
				uni.navigateTo({
					url: '/pages/activity/activityChannelRules?id=' + this.activityId
				})
			},
			// 跳转去活动记录
			hanldeActivityRecord() {
				uni.navigateTo({
					url: '/pages/my/activityRecord?id=' + this.data.activity_id + '&type=' + 'compose'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	// 中奖弹窗
	.gifts-box {
		width: 600rpx;
		height: 50vh;
		background: white;
		border-radius: 24rpx;
		padding: 24rpx;
		box-sizing: border-box;

		.gifts-image {
			display: block;
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
		}

		.consume-cancel {
			width: 230rpx;
			height: 80rpx;
			border: 2rpx solid $uni-theme;
			text-align: center;
			line-height: 80rpx;
			border-radius: 70rpx;
			color: $uni-theme;
			box-sizing: border-box;
		}

		.consume-define {
			width: 230rpx;
			height: 80rpx;
			background: $uni-bg-theme;
			text-align: center;
			line-height: 80rpx;
			border-radius: 70rpx;
			color: white;
			box-sizing: border-box;
		}

		.title-img {
			width: 46rpx;
			height: 12rpx;
			margin: 0 32rpx;
		}

		.gifts-list {
			height: calc(50vh - 140rpx);
			overflow-y: scroll;
			margin: 20rpx 0;
		}

		.consume-list {
			height: calc(50vh - 320rpx);
			overflow-y: scroll;
			margin: 20rpx 0;
		}

		.gifts-button {
			width: 400rpx;
			height: 100rpx;
			background: $uni-bg-theme;
			text-align: center;
			line-height: 100rpx;
			border-radius: 70rpx;
			color: white;
		}

		.cry {
			width: 240rpx;
			height: 160rpx;
		}
	}

	.close {
		width: 48rpx;
		height: 48rpx;
	}

	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		::v-deep .u-collapse {
			margin-top: 30rpx;

			.u-cell__body {
				background: $uni-bg-theme1;
				border-radius: 24rpx;
				margin-bottom: 30rpx;
				border: 1px solid #ebebeb;
				padding: 10rpx 20rpx;
			}

			.u-icon__icon--info {
				font-size: 20rpx !important;
			}

			.u-collapse-item__content__text {
				padding: 0 !important;
			}
		}



		.banner {
			position: relative;

			.cover {
				width: 100%;
				height: 688rpx;
			}

			.rule_btn {
				width: 154rpx;
				height: 70rpx;
				border-radius: 50rpx 0 0 50rpx;
				border-top: 1rpx solid $uni-theme;
				border-bottom: 1rpx solid $uni-theme;
				border-left: 1rpx solid $uni-theme;
				position: absolute;
				right: 0rpx;
				top: 34rpx;
				background: $uni-bg-theme1;
				font-size: 24rpx;
				color:white;
			}
		}

		.tab-list {
			font-size: 28rpx;
			background: $uni-bg-black;
			border: 1px solid #ebebeb;
			padding: 8rpx 25rpx;
			border-radius: 8rpx;
			color: white;
		}

		.tabOn {
			background: $uni-bg-theme;
			color: white;
		}

		.list-box {

			.list {
				background: $uni-bg-black;
				border: 2rpx solid #ebebeb;
				border-radius: 16rpx;
				position: relative;

				.list-right {
					width: 120rpx;
					height: 120rpx;
					background: #e3dede;
				}

				::v-deep .u-count-down__text {
					width: 110rpx;
					text-align: right;
					font-size: 24rpx;
					color: white;
				}

				.bg-theme1 {
					::v-deep .u-count-down__text {
						width: 110rpx;
						text-align: right;
						font-size: 24rpx;
						color: $uni-theme !important;
					}
				}

				.status {
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					color: white;
					border-radius: 0 16rpx 0 16rpx;
					padding: 0 16rpx;
					line-height: 44rpx;
				}

				.bg-hui {
					background: rgba(0, 0, 0, .2);
				}

				.cover {
					width: 156rpx;
					height: 156rpx;
				}
			}
		}
	}

	.button-box {
		position: fixed;
		width: 100%;
		bottom: 0;

		.button-price {
			margin-right: 100rpx;
		}

		.button {
			background: $uni-bg-theme;
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 46rpx;
		}
	}

	.goods-list {
		height: 600rpx;
		overflow: hidden;
		overflow-y: scroll;

		.list {
			width: calc(50% - 16rpx);
			height: 100rpx;
			position: relative;
			overflow: hidden;
			flex-direction: column;
			box-sizing: border-box;

			.checked-icon {
				position: absolute;
				display: block;
				width: 40rpx;
				height: 40rpx;
				right: 10rpx;
				top: 5rpx;
			}
		}
	}

	.button-style {
		background: $uni-bg-theme;
		color: #fff;
		text-align: center;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 46rpx;
	}

	.hold-number {
		display: inline-block;
		margin: 0 10rpx;
		font-weight: 600;
		color: $uni-theme;
	}

	.buton-select {
		background: linear-gradient(270deg, #df0007, #df0007);
		color: #fff;
		text-align: center;
		height: 48rpx;
		width: 120rpx;
		line-height: 48rpx;
		border-radius: 46rpx;
		font-size: 26rpx;
	}
	
	.buttonOp{
		opacity: .5;
	}
</style>